<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<title>绍兴旅游景点网页</title>
		<style>
			.navbar-dark .navbar-nav .nav-link{
				color: rgba(255, 255, 255, .75);
			}
			.title{
				width: 100%;
				margin: 20px auto 60px;
				text-align: center;
				font-size: 24px;
			}
			.spot{
				background: #fff;
				overflow: hidden;
				margin-bottom: 25px;
				box-shadow: 0 5px 6px 0 #e2e2e2;
			}
			.spot:hover{
				box-shadow: 0 0 10px 0 #999;
			}
			.spot .spot-thumb{
				position: relative;
				width: 100%;
				height: 0;
				padding-bottom: 66.67%;
				cursor: pointer;
				background-color: #000;
				overflow: hidden;
			}
			.spot figure img{
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				-webkit-transition: opacity .4s;
				transition: opacity .4s;
			}
			.spot figure:hover img{
				opacity: .5;
			}
			.spot figure figcaption{
				position: absolute;
				top: 80px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				padding: 0 15px;
				-webkit-transition: -webkit-transform .4s;
				transition: transform .4s;
				-webkit-transform: translate(0,15%);
				transform: translate(0,15%);
			}
			.spot figure p{
				color: #fff;
				opacity: 0;
				-webkit-transition: opatcity 0.4s;
				transition: opacity 0.4s;
				text-align: justify;
				text-indent: 2em;
				font-weight: 600;
			}
			.spot figure:hover figcaption{
				-webkit-transform: translate(0,0);
				transform: translate(0,0);
			}
			.spot figure:hover p{
				opacity: 1;
			}
			.spot .spot-info{
				padding: 0 20px 8px; 
			}
			.spot .spot-name{
				margin-bottom: 12px;
				font-size: 1.25rem;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
			}
			.spot .spot-meta{
				font-size: 0.825em;
				line-height: 1.5;
				color: #ad0711;
			}
		</style>
	</head>
	<body>
		<script src="js/jquery-3.7.1.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
		<!-- 导航栏组件 -->
		<nav class="navbar navbar-expand-md navbar-dark bg-dark">
			<div class="container">
				<a href="#" class="navbar-brand">绍兴旅游</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="menu">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a href="#" class="nav-link">首页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">景点介绍</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">品味绍兴</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">绍兴印象</a>
						</li>
					</ul>
					
				</div>
				<div  class="collapse navbar-collapse">
					<ul class="navbar-nav">
					  <li class="nav-item">
					    <a class="nav-link" href="#">登录</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" href="#">注册</a>
					  </li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 轮播图组件 -->
		<section id="banner-container">
			<div id="banner" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#banner" data-slide-to="0" class="active"></li>
					<li data-target="#banner" data-slide-to="1"></li>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="images/banner1.jpg" alt="老绍兴最江南" class="d-block w-100">
						<div class="carousel-caption d-none d-md-block">
							<h5>安昌古镇</h5>
							<p>安昌古镇是绍兴有名的四大古镇之一，是浙江省第一批公布的历史文化名镇······</p>
						</div>
					</div>
					<div class="carousel-item">
						<img src="images/banner2.jpg" alt="悠悠鉴湖水,浓浓古越情" class="d-block w-100">
						<div class="carousel-caption d-none d-md-block">
							<h5>水乡绍兴</h5>
							<p>绍兴是个名人荟萃之地，钟灵毓秀，人杰地灵。······</p>
						</div>
					</div>
				</div>
				<a href="#banner" class="carousel-control-prev" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a href="#banner" class="carousel-control-next" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</section>
		<!-- 容器 -->
		<section class="container spot-list mt-5">
			<div class="row">
				<h2 class="title">景点介绍</h2>
			</div>
			<div class="row">
				<div class="col-sm-10 offset-1 offset-md-0 col-md-6 col-lg-4">
					<div class="spot">
						<figure class="spot-thumb">
							<img src="images/spot1.jpg" alt="鲁迅故里" class="img-fluid">
							<figcaption>
								<p>鲁迅故里是绍兴市内的一条历史街区，含有大量与鲁迅及鲁迅文化相关的历史文化信息。</p>
							</figcaption>
						</figure>
						<div class="spot-info">
							<h4 class="spot-name">鲁迅故里</h4>
							<div class="spot-meta d-flex justify-content-between">
								<span>20171人去过</span>
								<span>3024人点评</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-10 offset-1 offset-md-0 col-md-6 col-lg-4">
					<div class="spot">
						<figure class="spot-thumb">
							<img src="images/spot2.jpg" alt="仓桥直街" class="img-fluid">
							<figcaption>
								<p>仓桥直街是绍兴市内的一条历史街区，含有大量与鲁迅及鲁迅文化相关的历史文化信息。</p>
							</figcaption>
						</figure>
						<div class="spot-info">
							<h4 class="spot-name">仓桥直街</h4>
							<div class="spot-meta d-flex justify-content-between">
								<span>20171人去过</span>
								<span>3024人点评</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-10 offset-1 offset-md-0 col-md-6 col-lg-4">
					<div class="spot">
						<figure class="spot-thumb">
							<img src="images/spot3.jpg" alt="东湖风景区" class="img-fluid">
							<figcaption>
								<p>东湖风景区是绍兴市内的一条历史街区，含有大量与鲁迅及鲁迅文化相关的历史文化信息。</p>
							</figcaption>
						</figure>
						<div class="spot-info">
							<h4 class="spot-name">东湖风景区</h4>
							<div class="spot-meta d-flex justify-content-between">
								<span>20171人去过</span>
								<span>3024人点评</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-10 offset-1 offset-md-0 col-md-6 col-lg-4">
					<div class="spot">
						<figure class="spot-thumb">
							<img src="images/spot4.jpg" alt="柯岩风景区" class="img-fluid">
							<figcaption>
								<p>柯岩风景区是绍兴市内的一条历史街区，含有大量与鲁迅及鲁迅文化相关的历史文化信息。</p>
							</figcaption>
						</figure>
						<div class="spot-info">
							<h4 class="spot-name">柯岩风景区</h4>
							<div class="spot-meta d-flex justify-content-between">
								<span>20171人去过</span>
								<span>3024人点评</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-10 offset-1 offset-md-0 col-md-6 col-lg-4">
					<div class="spot">
						<figure class="spot-thumb">
							<img src="images/spot5.jpg" alt="府山公园" class="img-fluid">
							<figcaption>
								<p>府山公园是绍兴市内的一条历史街区，含有大量与鲁迅及鲁迅文化相关的历史文化信息。</p>
							</figcaption>
						</figure>
						<div class="spot-info">
							<h4 class="spot-name">府山公园</h4>
							<div class="spot-meta d-flex justify-content-between">
								<span>20171人去过</span>
								<span>3024人点评</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-10 offset-1 offset-md-0 col-md-6 col-lg-4">
					<div class="spot">
						<figure class="spot-thumb">
							<img src="images/spot6.jpg" alt="大禹陵" class="img-fluid">
							<figcaption>
								<p>大禹陵是绍兴市内的一条历史街区，含有大量与鲁迅及鲁迅文化相关的历史文化信息。</p>
							</figcaption>
						</figure>
						<div class="spot-info">
							<h4 class="spot-name">大禹陵</h4>
							<div class="spot-meta d-flex justify-content-between">
								<span>20171人去过</span>
								<span>3024人点评</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- 分页组件 -->
		<nav aria-label="tourists pages">
			<ul class="pagination justify-content-center">
				<li class="page-item disabled"><a href="#" class="page-link">&laquo;</a></li>
				<li class="page-item active"><a href="#" class="page-link">1</a></li>
				<li class="page-item"><a href="#" class="page-link">2</a></li>
				<li class="page-item"><a href="#" class="page-link">3</a></li>
				<li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
			</ul>
		</nav>
		<!-- 页尾组件 -->
		<footer class="bg-dark py-4 text-center text-white">&copy;版权所有-231010118</footer>
	</body>
</html>